<template>
	<div class="topBar">
		<div>
			<div v-bind:class="{'my-info': $store.state.isCollapse, 'my-info1': !$store.state.isCollapse}">
			<div class="ivu-avatar">
				<img v-if="(Imgurl) != undefined && (Imgurl) != '' && (Imgurl) != null" :src="host1+Imgurl" class="imgs" />
				<img v-else src="../../../../build/logo.png" class="imgs" />
			</div>
			<el-dropdown trigger="click" class="usrs">
				<span class="el-dropdown-link">
		      		<span class="uasename">{{usrname}}</span>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>
						<span @click="grsz()">个人设置</span>
					</el-dropdown-item>
					<el-dropdown-item>
						<span @click="cancel()">退出</span>
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
			<el-menu class="el-menu-demo btn">
				<i class="icon iconfont icon-caidan" @click="$store.commit('toggle')""></i>
			</el-menu>
		</div>
		
		
		<div class="sweet-overlay" v-if="mark5">
			<el-dialog title="个人信息设置" :visible.sync="mark5" size="tiny" :modal="false">
				<el-tabs v-model="activeName3" @tab-click="handleClick1">
					<el-tab-pane label="用户信息" name="first">
						<el-form ref="form" :model="form" label-width="80px" style="margin-top: 10px;">
							<el-form-item label="用户名">
								<el-input v-model="form.username" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="姓名">
								<el-input v-model="form.name"></el-input>
							</el-form-item>
							<el-form-item label="联系电话">
								<el-input v-model="form.tel"></el-input>
							</el-form-item>
							<div  class="uploadImg">
								<el-upload style="text-align: center;"
								  class="upload-demo"
								  ref="upload"
								  :action="host"
								  :limit="limitnum"
								  :on-preview="handlePreview"
								  :on-remove="handleRemove"
								  :file-list="fileList"
								  :onError="uploadError"
								  :on-change="handleChange"
								  :onSuccess="uploadSuccess"
								  :auto-upload="false">
								  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
								  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
								  <img :src="imgUrl" class="bannerimg2" v-if="imgUrl"/>
								</el-upload>
							</div>
							<span style="display: block; text-align: right; margin-top:20px;">
								<el-button @click="quxia()">取 消</el-button>
								<el-button type="primary" @click="updateuser()">确 定</el-button>
						    </span>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="密码修改" name="second">
						<el-form ref="form" :model="form" label-width="80px" style="margin-top: 10px;">
							<el-form-item label="旧密码">
								<el-input v-model="form.padd" type="password"></el-input>
							</el-form-item>
							<el-form-item label="新密码">
								<el-input v-model="form.pass" type="password"></el-input>
							</el-form-item>
							<el-form-item label="密码确认">
								<el-input v-model="form.pwd" type="password"></el-input>
							</el-form-item>

						</el-form>
						<span style="display: block; text-align: right; margin-top:20px;">
								<el-button @click="quxia()">取 消</el-button>
								<el-button type="primary" @click="mmcz()">确 定</el-button>
						</span>
					</el-tab-pane>
				</el-tabs>
			</el-dialog>
		</div>
	</div>
	
</template>

<script>
	import store from '@/vuex/store'
	import api from '../../../api/api'
	export default {
		name: 'topBar',
		data() {
			return {
				host1:host,
				mark5:false,
				usrname:'',
				limitnum:1,
				form: {
					name: "",
					tel: "",
					username: "",
					pass: "",
					pwd: "",
					padd: ""
				},
				activeName3: 'first',
				host: "",
				fileList: [], //上传头像
				imgUrl:'',//小图
				headerImg:""
			}
		},
		created: function() {
			this.host = api.files
			this.usrname = sessionStorage.CNName
			this.Imgurl = sessionStorage.HeadImg
			this.headerImg = sessionStorage.HeadImg
		},
		store,
		methods:{
			//注销
			cancel(){
				this.$axios.post(api.signout).then((res) => {
					if(res.data.isOK) {
						sessionStorage.clear();
						this.$router.push({
							path: '/admin'
						})
					} else {
						this.$message.error(res.data.msg);
					}
				});
			},
			handleClick1(tab, event) {
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			uploadSuccess(response, file, fileList1) {
				this.$message({
					message: '上传成功',
					type: 'success'
				});
				this.headerImg = response.data.filePaht.substring(2, response.data.filePaht.length)
			},
			uploadError(response, file, fileList1) {
				this.$message.error("上传失败，请重试");
			},
			handleRemove(file, fileList1) {
			},
			handlePreview(file) {
			},
			handleChange(file, fileList){
		    	this.imgUrl = file.url
		    },
		    //个人设置
		    grsz(){
		    	this.mark5 = true
		    	this.form.name=""
		    	this.form.tel=""
		    	this.form.username = this.usrname
		    	this.imgUrl = api.host + this.Imgurl
		    },
		    //修改用户
		    updateuser(){
		    	this.$axios.post(api.editprofile,{
				  "Login": this.form.username,
				  "CNName": this.form.name,
				  "Tel": this.form.tel,
				  "HeadIMG":this.headerImg
				}).then(res=>{
					if(res.data.isOK){
						this.mark5 = false;
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						sessionStorage.HeadImg = this.headerImg
						this.Imgurl = sessionStorage.HeadImg
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
		   },
		   mmcz() {
				if(this.form.pass == this.form.pwd && this.form.padd != null) {
					this.$axios.post(api.changepwd, {
						"Login": sessionStorage.login,
						"NewPwd": md5(this.form.pass),
						"OldPwd": md5(this.form.padd),
						"ValidOld": true
					}).then((res) => {
						if(res.data.isOK) {
							this.mark5 = false;
							this.$message({
								message: '修改成功',
								type: 'success'
							});
						} else {
							this.mark5 = false;
							this.$message.error(res.data.msg);
						}
					});
				} else {
					this.$message.error("两次密码输入不一样或密码为空");
					this.mark5 = true;
				}

			},
		}
	}
</script>

<style>
	.topBar {
		height: 60px;
		background: #fff;
		width: 100%;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 2001;
		box-shadow: 0px -13px 71px #888888;
	}
	
	.logo {
		width: 200px;
		float: left;
		height: 60px;
		transition: all 0.2s ease;
	}
	
	.logo1 {
		width: 70px;
		float: left;
		height: 60px;
		transition: all 0.2s ease;
	}
	
	.btn {
		margin-top: 12px;
		width: 28px;
		height: 28px;
		float: left;
		color: #000;
		background: none;
		border-bottom: 0;
		border-right: 0;
	}
	
	.btn .iconfont {
		font-size: 30px;
	}
	
	.my-info {
		width: 200px;
		text-align: center;
		float: left;
		/*margin-right: 60px;*/
		margin-top: 7px;
		position: relative;
		transition: all 0.2s ease;
	}
	.my-info1{
		width: 70px;
		text-align: center;
		float: left;
		/*margin-right: 60px;*/
		margin-top: 7px;
		position: relative;
		transition: all 0.2s ease;
	}
	.el-dropdown {
		text-align: center;
	}
	.ivu-avatar {
		display: inline-block;
		text-align: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		width: 28px;
		height: 28px;
		line-height: 32px;
		border-radius: 16px;
	}
	.ivu-avatar img {
		width: 100%;
		height: 28px;
		display: block;
		font-size: 0;
	}
	.usrs{
		display: block;
	}
	.uasename {
		display: block;
		text-align: center;
		color: #000;
	}
	.uploadImg{
		text-align: center;
	}
	.uploadImg img{
		margin-top: 10px;
		width: 80px;
		font-size: 0;
	}
	.sweet-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 999999;
	}
	.bannerimg2{
		display: block;
		width: 40px;
		margin: auto;
		margin-top: 20px;
	}
</style>